<template>
  <div class="home">
    <!-- <el-card v-for="(item, index) in bookList" :key="index">
      {{ item }}
    </el-card> -->
    <template>
      <el-row class="infinite-list" v-infinite-scroll="load" style="overflow: auto">
        <el-col
          v-for="(item, index) in bookList.rows"
          :key="index"
          class="infinite-list-item"
        >
          <el-card>
            <div class="img_box">
              <el-image
                class="book_cover"
                :src="
                  item.cover ||
                  'http://127.0.0.1:7001/public/upload/1618791425297.jpg'
                "
              ></el-image>
            </div>
            <span>《{{ item.name }}》</span>
            <span> 作者：{{ item.author }}</span>
            <span> 类别：{{ item.category }}</span>
            <span> 出版社：{{ item.press }}</span>
            <span> 价格：{{ item.price }}</span>
            <span> 简介：{{ item.info }}</span>
          </el-card>
        </el-col>
      </el-row>
    </template>
  </div>
</template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 书籍列表
      bookList: [],
      count: 0,
    };
  },
  created() {
    this.getBookList();
  },
  mounted () {
    window.onscroll = function(){
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight == scrollHeight){
        //到了这个就可以进行业务逻辑加载后台数据了
          console.log("到了底部");
        } 
      }
  },
  methods: {
    // 从内存中拿到图书数据
    getBookList() {
      let list = JSON.parse(window.localStorage.getItem("bookList"));
      this.bookList = list;
      console.log(this.bookList);
    },
    load() {
      // this.count += 5;
      // this.bookList.rows.length += 5
      // this.$store.dispatch("getBookList", this.count);
      // console.log("sss")
      console.log(this.count)
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  .el-row {
    .el-col {
      .el-card {
        height: 200px;
        margin-top: 20px;
        position: relative;
      }
        .book_cover {
          width: 100px;
          height: 150px;
          float: left;
        }
      
        span{
          display: block;
        }
    }
  }
}
</style>